<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue2.0_生命周期</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue2.0_生命周期</h1>
    <img style="width:60%" src="http://7xjyw1.com1.z0.glb.clouddn.com/vue-lifecycle.png" alt="">
    <textarea name="name" rows="40" cols="80">
      beforeCreate:function(){
                      console.log('1-beforeCreate 初始化之后');
                  },
                  created:function(){
                      console.log('2-created 创建完成');
                  },
                  beforeMount:function(){
                      console.log('3-beforeMount 挂载之前');
                  },
                  mounted:function(){
                      console.log('4-mounted 被创建');
                  },
                  beforeUpdate:function(){
                      console.log('5-beforeUpdate 数据更新前');
                  },
                  updated:function(){
                      console.log('6-updated 被更新后');
                  },
                  activated:function(){
                      console.log('7-activated');
                  },
                  deactivated:function(){
                      console.log('8-deactivated');
                  },
                  beforeDestroy:function(){
                      console.log('9-beforeDestroy 销毁之前');
                  },
                  destroyed:function(){
                      console.log('10-destroyed 销毁之后')
                  }
    </textarea>
    <hr>
    7和8在组件或者路由中用到
    <div id="app">
      {{count}}
      <br>
      <button @click="add" type="button" name="button">add</button>
    </div>
    <button onclick="app.$destroy()" type="button" name="button">销毁</button>
    <script>

        var app=new Vue({
            el:"#app",
            data:{
              count:1
            },
            methods:{
              add:function(){
                this.count++
              }
            },
            beforeCreate:function(){
              //读取数据
             console.log('1-beforeCreate 初始化之前');
           },
           created:function(){
             //显示数据
               console.log('2-created 创建完成');
           },
           beforeMount:function(){
               console.log('3-beforeMount 挂载之前');
           },
           mounted:function(){
               console.log('4-mounted 被挂载之后被创建');
           },
           beforeUpdate:function(){
               console.log('5-beforeUpdate 数据更新前');
           },
           updated:function(){
               console.log('6-updated 被更新后');
           },
           activated:function(){
               console.log('7-activated');
           },
           deactivated:function(){
               console.log('8-deactivated');
           },
           beforeDestroy:function(){
               console.log('9-beforeDestroy 销毁之前');
           },
           destroyed:function(){
               console.log('10-destroyed 销毁之后')
           }
        })
    </script>
</body>
</html>
